import React, { useState } from 'react'
import './sqgridlist.less'
// 做子传父 一定要加props
export default function SQGridList(props) {
    // console.log(props);
    const [current, setCurrent] = useState(0)
    const changeSelect = (index, key) => {
        setCurrent(index)
        props.onItemChange(key)
    }
    return (
        <div className="sqgl">
            <h4>{props.title}</h4>
            <div className="list">
                {
                    props.data.map((item, index) => {
                        return <div key={item.key} onClick={() => changeSelect(index, item.key)} className={["list-btn", index === current ? 'active' : ''].join(' ')}>{item.zh}{item.value}</div>
                    })
                }
            </div>
        </div>
    )
}
